<template>
    <div class="root">
        <div class="title">
            <span style="font-weight: 600; font-size: 20px;">添加书籍</span>
        </div>
        <div class="content">
            <el-form ref="form" style="width: 500px" :rules="rules" :model="formData" label-width="120px">
                <el-form-item label="书籍名称" prop="bookName">
                    <el-input v-model="formData.bookName"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="bookAuthor">
                    <el-input v-model="formData.bookAuthor"></el-input>
                </el-form-item>
                <el-form-item label="出版社" prop="bookPress">
                    <el-input v-model="formData.bookPress"></el-input>
                </el-form-item>
                <el-form-item label="标准ISBN" prop="bookIsbn">
                    <el-input v-model="formData.bookIsbn"></el-input>
                </el-form-item>
                <el-form-item label="书籍页数" prop="bookPagination">
                    <el-input v-model="formData.bookPagination"></el-input>
                </el-form-item>
                <el-form-item label="书籍价格" prop="bookPrice">
                    <el-input v-model="formData.bookPrice"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button @click="cancel" plain>取消</el-button>
                    <el-button style="background-color: #6777ef; color: #fff; border: none;" @click="submit" plain>确认保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import api from '@/api/request.js'
import router from '@/router'
export default {
    data() {
        return {
            formData: {
                bookName: "",
                bookAuthor: "",
                bookPress: "",
                bookIsbn: "",
                bookPagination: "",
                bookPrice: ""
            },
            rules: {
                bookName: [
                    { 
                        required: true, 
                        message: "请输入书籍名", 
                        trigger: "blur" 
                    }
                ],
                bookAuthor: [
                    { 
                        required: true, 
                        message: "请输入作者", 
                        trigger: "blur" 
                    }
                ],
                bookPress: [
                    { 
                        required: true, 
                        message: "请输入出版社", 
                        trigger: "blur" 
                    }
                ],
                bookIsbn: [
                    { 
                        required: true, 
                        message: "请输入书籍Isbn", 
                        trigger: "blur" 
                    }
                ],
                bookPagination: [
                    { 
                        required: true, 
                        message: "请输入书籍页数", 
                        trigger: "blur" 
                    }
                ],
                bookPrice: [
                    { 
                        required: true, 
                        message: "请输入价格", 
                        trigger: "blur" 
                    }
                ]
            }
        }
    },
    methods: {
        submit(){
            this.$refs.form.validate(valid => {
                if (valid) {
                    api.addBookApi(this.formData).then(res => {
                        if (String(res.data.code) === '1') {
                            this.$message.success(res.data.data);
                            // 登录成功后进行路由跳转
                            router.push('/book');
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('出错啦');
                    });
                } else {
                    this.$message.error('你没看见红框？？？');
                }
            });
        },
        cancel(){
            this.$message.success("已取消");
            router.push('/book');
        }
    }
}
</script>

<style scoped>
    .root {
        padding: 20px;
    }

    .content {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        /* background-color: rosybrown; */
    }
</style>